<template>
  <div class="pageContent padding-trbl-20 margin-b-60">
    <!-- 工单情况统计 -->
    <div class="flex-row">
      <el-card class="box-card  width100">
        <Title title="已完成工单情况统计"></Title>
        <div class="padding-l-30 margin-t-60 flex-row row-between">
          <div
            class="orderStateItem border-right padding-r-30 padding-l-30"
            v-for="(item, index) in orderState"
            :key="index"
            :class="index == 0 || index == 2 || index == 6 ? 'pointer' : ''"
            @click="
              index == 0 || index == 2 || index == 6
                ? orderListChange(
                    'year',
                    '',
                    '',
                    index == 2 ? 'chaoqiwancheng' : null,
                    index == 6 ? true : null
                  )
                : ''
            "
          >
            <div class="font-14 text-gray">{{ item.title }}</div>
            <div class="font-46" :style="{ color: orderStateColor[index] }">
              {{ item.number }}
              <span
                class="font-14 text-gray line-block"
                v-if="index == 0 || index == 2 || index == 6"
                >件</span
              >
              <span
                class="font-14 text-gray line-block"
                v-if="index == 1 || index == 4 || index == 5"
                >%</span
              >
              <span class="font-14 text-gray line-block" v-if="index == 3"
                >天</span
              >
            </div>
            <LineProgress
              class="margin-t-40"
              :title="item.state ? '环比去年增长' : '环比去年下降'"
              :percentage="item.percentage >= 100 ? 100 : item.percentage"
              :showtextVal="item.showTextVal"
              :showtext="false"
              :strokeWidth="10"
              titleColor="#5673ca"
              :percentageColor="item.percentageColor"
              :icon="item.icon"
              :type="index == 3 ? 'hfzq' : ''"
            ></LineProgress>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 工单办理量统计--今日预警件统计 -->
    <div class="flex-row margin-t-20">
      <!-- 工单办理量统计 -->
      <el-card class="box-card card2Box margin-r-20">
        <Title title="工单办理量统计"></Title>
        <div class="flex-row row-between padding-lr-30">
          <div
            class="wordOrderItem text-white padding-lr-30 rela pointer"
            @click="orderListChange('year')"
          >
            <div class="content abso abso-center rela">
              <div class="font-24">本年</div>
              <div class="margin-t-10">
                <span class="font-42">{{ getGdblltj_r.gdbblCurY }}</span> 件
              </div>
              <div>
                <LineProgress
                  class="margin-t-10"
                  :title="
                    getGdblltj_r.addY == true ? '环比去年增长' : '环比去年下降'
                  "
                  :percentage="
                    getGdblltj_r.hbqnYPct >= 100 ? 100 : getGdblltj_r.hbqnYPct
                  "
                  :showtextVal="getGdblltj_r.showtextYPct"
                  :showtext="false"
                  :strokeWidth="10"
                  titleColor="#ffffff"
                  percentageColor="#ffffff"
                  :icon="getGdblltj_r.addY ? 'rise2' : 'decline2'"
                  trendImgColor="white"
                ></LineProgress>
              </div>
            </div>
            <div class="card_shadow abso">
              <img
                src="../../../assets/images/card_shadow01.png"
                class="width100"
              />
            </div>
          </div>
          <div
            class="wordOrderItem text-white padding-lr-30 rela pointer"
            @click="orderListChange('month')"
          >
            <div class="content abso abso-center rela">
              <div class="font-24">本月</div>
              <div class="margin-t-10">
                <span class="font-42">{{ getGdblltj_r.gdbblCurM }}</span> 件
              </div>
              <div>
                <LineProgress
                  class="margin-t-10"
                  :title="getGdblltj_r.addM ? '环比上月增长' : '环比上月下降'"
                  :percentage="
                    getGdblltj_r.gdbblCurM == 0
                      ? 0
                      : getGdblltj_r.hbqnMPct >= 100
                      ? 100
                      : getGdblltj_r.hbqnMPct
                  "
                  :showtextVal="
                    getGdblltj_r.gdbblCurM == 0 ? 0 : getGdblltj_r.showtextMPct
                  "
                  :showtext="false"
                  :strokeWidth="10"
                  titleColor="#ffffff"
                  percentageColor="#ffffff"
                  :icon="getGdblltj_r.addM ? 'rise2' : 'decline2'"
                  trendImgColor="white"
                ></LineProgress>
              </div>
            </div>
            <div class="card_shadow abso">
              <img
                src="../../../assets/images/card_shadow02.png"
                class="width100"
              />
            </div>
          </div>
          <div
            class="wordOrderItem text-white padding-lr-30 rela pointer"
            @click="orderListChange('date')"
          >
            <div class="content abso abso-center rela">
              <div class="font-24">本日</div>
              <div class="margin-t-10">
                <span class="font-42">{{ getGdblltj_r.gdbblCurD }}</span> 件
              </div>
              <div>
                <LineProgress
                  class="margin-t-10"
                  :title="getGdblltj_r.addD ? '环比昨日增长' : '环比昨日下降'"
                  :percentage="
                    getGdblltj_r.hbqnDPct >= 100 ? 100 : getGdblltj_r.hbqnDPct
                  "
                  :showtextVal="getGdblltj_r.showtextDPct"
                  :showtext="false"
                  :strokeWidth="10"
                  titleColor="#ffffff"
                  percentageColor="#ffffff"
                  :icon="getGdblltj_r.addD ? 'rise2' : 'decline2'"
                  trendImgColor="white"
                ></LineProgress>
              </div>
            </div>
            <div class="card_shadow abso">
              <img
                src="../../../assets/images/card_shadow03.png"
                class="width100"
              />
            </div>
          </div>
        </div>
      </el-card>
      <!-- 今日预警件统计 -->
      <el-card class="box-card card1Box">
        <Title title="今日预警件统计"></Title>
        <div class="card1 flex-row padding-l-20">
          <div class="card1_r flex-row">
            <div
              class="index_card1Echart margin-r-40"
              id="index_card1Echart"
            ></div>
            <div class="card1EchartList">
              <div
                class="card1EchartItem flex-row pointer"
                v-for="(item, index) in workOrderNumber"
                :key="index"
                @click="
                  orderListChange(
                    'year',
                    '',
                    '',
                    'jinridaoqi',
                    false,
                    '',
                    '',
                    item.deptId
                  )
                "
              >
                <div
                  class="card1EchartItem_l font-12 padding-l-20 rela text-gray"
                >
                  <span
                    class="abso"
                    :style="{ backgroundColor: reversedMessage(index) }"
                  ></span
                  >{{ item.name }}
                </div>
                <div class="card1EchartItem_c font-14 text-right text-gray">
                  <span
                    class="font-24 text-light-oragen line-block"
                    :style="{ color: reversedMessage(index) }"
                    >{{ item.value }}</span
                  >件
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 热点事件、重复件 -->
    <div class="flex-row margin-t-20">
      <!-- 热点事件统计 -->
      <el-card class="box-card card6Box margin-r-20">
        <div class="cardTitleBox rela">
          <Title title="热点事件统计"></Title>
          <div
            class="cardMore text-dark-gray font-12 abso pointer"
            @click="maskToggle('hot')"
          >
            更多<i class="el-icon-d-arrow-right"></i>
          </div>
        </div>
        <div class="hotEvents padding-l-30 padding-r-30 margin-t-30">
          <div
            class="text-dark-gray font-14 text-center"
            style="margin-top: 100px;"
            v-if="hotSortArray == ''"
          >
            暂无数据
          </div>
          <template v-for="(item, index) in hotEvents">
            <div
              class="hotEventsItem pointer"
              :class="[index > 0 ? 'margin-t-10' : '']"
              :key="index"
              v-if="index < 6"
              @click="routerToList(item)"
            >
              <LineProgress1
                :title="item.title"
                :number="item.number"
                :percentage="Math.round((item.number / (maxHot + 10)) * 100)"
                :roundLeft="1"
                :showtext="false"
                :strokeWidth="10"
              ></LineProgress1>
            </div>
          </template>
        </div>
      </el-card>
      <!-- 重复件 -->
      <el-card class="box-card card7Box">
        <div class="cardTitleBox rela">
          <Title title="重复件统计"></Title>
          <div
            class="cardMore text-dark-gray font-12 abso pointer"
            @click="maskToggle('repeat')"
          >
            更多<i class="el-icon-d-arrow-right"></i>
          </div>
        </div>
        <div class="margin-l-30 margin-t-30">
          <div
            class="text-dark-gray font-14 text-center"
            style="margin-top: 100px;"
            v-if="repeatList == ''"
          >
            暂无数据
          </div>
          <template v-for="(item, index) in repeatList">
            <div
              class="replatItem rela pointer"
              :class="[index > 0 ? 'margin-t-10' : '']"
              :key="index"
              v-if="index < 6"
              @mouseover="repeatMouseover(index)"
              @mouseout="repeatMouseout"
              @click="routerToList(item)"
            >
              <div class="titleBox flex-row row-between">
                <div class="title text-cut font-14 text-gray">
                  {{ item.ldr }} {{ item.sjh }} - {{ item.content }}
                </div>
              </div>
              <CustomGraphical
                :progressWidth="
                  Math.round((item.count / (maxRepeat + 10)) * 100)
                "
                :number="item.count"
              ></CustomGraphical>
              <div
                class="repeatContentBox abso text-white"
                v-if="replatShowIndex == index && !maskShow"
              >
                <div class="text-line-cut repeatContent">
                  {{ item.content }}
                </div>
                <div class="sanjiao_down abso"></div>
              </div>
            </div>
          </template>
        </div>
      </el-card>
    </div>
    <!-- 紧急件、疫情件-->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card12Box margin-r-20">
        <Title title="紧急件分类统计"></Title>
        <div class="card1 flex-row padding-l-20">
          <div class="card1_r flex-row">
            <div
              class="index_card12Echart margin-r-40"
              id="index_card2Echart"
            ></div>
            <div class="card1EchartList card12EchartList">
              <div
                class="card1EchartItem flex-row pointer"
                v-for="(item, index) in UrgentData"
                :key="index"
                @click="
                  orderListChange(
                    'year',
                    '',
                    '',
                    null,
                    null,
                    '',
                    '',
                    '',
                    'jinji',
                    item
                  )
                "
              >
                <div
                  class="card1EchartItem_l font-12 padding-l-20 rela text-gray"
                >
                  <span
                    :style="{ backgroundColor: reversedMessage(index) }"
                    class="abso"
                  ></span
                  >{{ item.name }}
                </div>
                <div class="card1EchartItem_c font-14 text-right text-gray">
                  <span
                    :style="{ color: reversedMessage(index) }"
                    class="font-24 text-light-oragen line-block"
                    >{{ item.value }}</span
                  >件
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card card12Box card13Box">
        <Title title="疫情件分类统计"></Title>
        <div class="card1 flex-row padding-l-20">
          <div class="card1_r flex-row">
            <div
              class="index_card12Echart margin-r-40"
              id="index_card3Echart"
            ></div>
            <div class="card1EchartList card12EchartList">
              <div
                class="card1EchartItem flex-row pointer"
                v-for="(item, index) in EpidemicData"
                :key="index"
                @click="
                  orderListChange(
                    'year',
                    '',
                    '',
                    null,
                    null,
                    '',
                    '',
                    '',
                    'yiqing',
                    item
                  )
                "
              >
                <div
                  class="card1EchartItem_l font-12 padding-l-20 rela text-gray"
                >
                  <span
                    class="abso"
                    :style="{ backgroundColor: reversedMessage(index) }"
                  ></span
                  >{{ item.name }}
                </div>
                <div class="card1EchartItem_c font-14 text-right text-gray">
                  <span
                    class="font-24 text-light-oragen line-block"
                    :style="{ color: reversedMessage(index) }"
                    >{{ item.value }}</span
                  >件
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 工单来源 -->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card8Box width100 rela">
        <Title title="工单来源统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div class="index_card5Echart margin-t-40" id="index_card5Echart"></div>
      </el-card>
    </div>

    <!-- 全年月度工单处理量统计 -->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card8Box width100 rela">
        <Title title="全年月度工单处理量统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div class="card8Echart" id="card8Echart"></div>
      </el-card>
    </div>
    <!-- 全年月度退单率统计 -->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card9Box width100 rela">
        <Title title="全年月度退单量统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div class="card9Echart" id="card9Echart"></div>
      </el-card>
    </div>
    <!-- 不满意件类别统计 -->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card10Box width100">
        <Title title="不满意件类别统计"></Title>
        <div
          class="rela padding-l-20 padding-r-20 dissatisfied flex-row row-between margin-t-90"
        >
          <div
            class="text-dark-gray font-14 text-center width100"
            style="margin-top: 40px;"
            v-if="dissatisfied == ''"
          >
            暂无数据
          </div>
          <div class="circleProgressWidth abso" id="circleProgressWidth"></div>
          <div
            class="pointer"
            v-for="(item, index) in dissatisfied"
            :key="index"
            @click="
              orderListChange(
                'year',
                index == 4 ? comSet : item.majorCatId,
                '',
                '',
                null,
                '',
                true
              )
            "
          >
            <CircleProgress1
              :class="'dissatisfied_' + (index + 1)"
              :title="item.majorCatName"
              :number="item.count"
              :address="item.deptName"
              :percentage="item.pct"
              :strokeWidth="10"
              :width="circleProgressWidth"
              :showText="true"
            ></CircleProgress1>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 全年月度超期件统计 -->
    <div class="flex-row margin-t-20">
      <el-card class="box-card card11Box width100 rela">
        <Title title="全年月度超期件统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div class="card11Echart" id="card11Echart"></div>
      </el-card>
    </div>
    <!-- 热点事件、重复事件更多 -->
    <div class="maskBox" v-if="maskShow">
      <div
        class="maskContentBox bg-white rela padding-trbl-20"
        ref="maskContentBox"
      >
        <div class="closeMask abso pointer" @click="maskToggle">
          <i class="el-icon-close"></i>
        </div>
        <div class="maskContent margin-t-40">
          <div
            class="hotEvents padding-l-30 padding-r-30"
            v-if="maskType == 'hot'"
          >
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px;"
              v-if="hotEvents == ''"
            >
              暂无数据
            </div>
            <div
              class="hotEventsItem pointer"
              :class="[index > 0 ? 'margin-t-10' : '']"
              v-for="(item, index) in hotEvents"
              :key="index"
              @click="routerToList(item)"
            >
              <LineProgress1
                :title="item.title"
                :number="item.number"
                :percentage="Math.round((item.number / (maxHot + 10)) * 100)"
                :roundLeft="1"
                :showtext="false"
                :strokeWidth="10"
              ></LineProgress1>
            </div>
          </div>
          <div class="margin-l-30" v-else>
            <div
              class="text-dark-gray font-14 text-center"
              style="margin-top: 100px;"
              v-if="repeatList == ''"
            >
              暂无数据
            </div>
            <template v-for="(item, index) in repeatList">
              <div
                class="replatItem rela pointer"
                :class="[index > 0 ? 'margin-t-10' : '']"
                ref="replatItem"
                :key="index"
                @mouseover="repeatMouseover(index)"
                @mouseout="repeatMouseout(index)"
                @click="orderListChange('year', '', item.sjh)"
              >
                <div class="titleBox flex-row row-between">
                  <div class="title text-cut font-14 text-gray">
                    {{ item.ldr }} {{ item.sjh }} - {{ item.content }}
                  </div>
                </div>
                <CustomGraphical
                  :progressWidth="
                    Math.round((item.count / (maxRepeat + 10)) * 100)
                  "
                  :number="item.count"
                ></CustomGraphical>
                <div
                  class="repeatContentBox text-white abso"
                  ref="repeatContentBox"
                  v-if="replatShowIndex == index"
                >
                  <div class="text-line-cut repeatContent">
                    {{ item.content }}
                  </div>
                  <div class="sanjiao_down abso"></div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <Pagination
          class="Pagination"
          :totalSize="totalSize"
          :current="currentPage.current"
          :size="currentPage.size"
          @pageChange="currentPageChange"
          @sizeChange="currentSizeChange"
        ></Pagination>
      </div>
    </div>

    <!-- 自定义svg 用于环形progress颜色改变 s -->
    <!-- 不满意件类别统计 -->
    <div class="">
      <svg class="customSvg abso">
        <defs>
          <linearGradient
            id="dissatisfied1"
            x1="0%"
            y1="0%"
            x2="100%"
            y2="0%"
            style="box-shadow: 0 0 20px #c03cfd;"
          >
            <stop
              offset="0%"
              style="stop-color:#8073ff"
              stop-opacity="1"
            ></stop>
            <stop
              offset="50%"
              style="stop-color:#7d80ff"
              stop-opacity="1"
            ></stop>
            <stop
              offset="75%"
              style="stop-color:#c23bfd"
              stop-opacity="1"
            ></stop>
            <stop
              offset="100%"
              style="stop-color:#c03cfd"
              stop-opacity="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
      <svg class="customSvg abso">
        <defs>
          <linearGradient id="dissatisfied2" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop
              offset="0%"
              style="stop-color:#75bfff"
              stop-opacity="1"
            ></stop>
            <stop
              offset="100%"
              style="stop-color:#463cfd"
              stop-opacity="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
      <svg class="customSvg abso">
        <defs>
          <linearGradient id="dissatisfied3" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop
              offset="0%"
              style="stop-color:#f773ff"
              stop-opacity="1"
            ></stop>
            <stop
              offset="100%"
              style="stop-color:#fd3b91"
              stop-opacity="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
      <svg class="customSvg abso">
        <defs>
          <linearGradient id="dissatisfied4" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop
              offset="0%"
              style="stop-color:#ff767e"
              stop-opacity="1"
            ></stop>
            <stop
              offset="100%"
              style="stop-color:#fdaa3c"
              stop-opacity="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
      <svg class="customSvg abso">
        <defs>
          <linearGradient id="dissatisfied5" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop
              offset="0%"
              style="stop-color:#6fee8c"
              stop-opacity="1"
            ></stop>
            <stop
              offset="100%"
              style="stop-color:#36ecd9"
              stop-opacity="1"
            ></stop>
          </linearGradient>
        </defs>
      </svg>
    </div>
    <!-- 自定义svg 用于环形progress颜色改变 e -->

    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :nrlb="nrlb"
        :deptId="deptId"
        :bumanyi="bumanyi"
        :sjh="sjh"
        :orderType="orderType"
        :multiDiliver="multiDiliver"
        :catid="catid"
        :majorCatId="majorCatId"
        :minorCatId="minorCatId"
        :orderDataType="orderDataType"
      ></orderList>
    </el-dialog>
  </div>
</template>

<script>
import Title from '../../../components/title.vue'
import LineProgress from '../../../components/lineProgress/lineProgress.vue'
import LineProgress1 from '../../../components/lineProgress/lineProgress1.vue'
import CircleProgress1 from '../../../components/circleProgress/circleProgress1.vue'
import CustomGraphical from '../../../components/customGraphical/customGraphical1.vue'
import * as echarts from 'echarts'
import orderList from '../reportform/order/orderlist.vue'
// 公共函数
import { sort, stopBodyScroll } from '../../../assets/js/public.js'
import Pagination from '../../../components/pagination.vue'
export default {
  components: {
    Title,
    LineProgress,
    LineProgress1,
    CircleProgress1,
    CustomGraphical,
    Pagination,
    orderList
  },
  data () {
    return {
      // 工单办理量 左
      getGdblltj_l: [],
      // 预警件 左 环形图
      workOrderNumber: [],
      // 工单办理量 右
      getGdblltj_r: {},
      // 工单情况统计
      orderState: [],
      orderStateColor: ['#9865ff', '#35ca1c', '#ff3a3a', '#6d9fff', '#ff902e', '#35ca1c', '#ff39d7'],
      // 热点事件
      hotEventsCount: 0,
      hotEvents: [],
      hotSortArray: [],
      maxHot: 0,
      // 重复事件
      repeatList: [],
      replatShowIndex: -1,
      replatSortArray: [],
      maxRepeat: 0,
      // 工单内容类别
      workOrderType: [],
      monthList: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
      // 不满意件
      dissatisfied: [],
      circleProgressWidth: 0,
      systemYear: '',
      currentPage: {
        current: 1,
        size: 20
      },
      totalSize: 0,
      maskShow: false,
      maskType: '',
      repeatStyle: {
        zIndex: -1,
        opacity: 0,
        top: '0px'
      },
      orderListShow: false,
      fullScreen: true,
      sourceList: [
        { id: '10000', label: '电话工单' },
        { id: '12306', label: '信件工单' },
        { id: '12333', label: '短信工单' },
        { id: '10010', label: '网络理政工单' },
        { id: '12388', label: '962000热线' },
        { id: '12580', label: '其他' },
        { id: '10086', label: '公众信息网' }
      ],
      duration: null,
      date: null,
      sourceId: null,
      nrlb: null,
      deptId: null,
      bumanyi: null,
      sjh: null,
      orderType: null,
      multiDiliver: null,
      catid: null,
      empId: null,
      // 紧急件
      UrgentData: [],
      // 疫情件
      EpidemicData: [],
      majorCatId: null,
      minorCatId: null,
      orderDataType: null
    }
  },
  mounted () {
    const circleProgressWidth = document.getElementById('circleProgressWidth')
    this.circleProgressWidth = circleProgressWidth.clientWidth
    const date = new Date()
    this.systemYear = date.getFullYear()
    this.getGdblltjL()
    this.getUrgent() // 紧急件
    this.getEpidemic() // 疫情
    this.getGdblltjR()
    this.getGdqktj()
    this.getGdlrlbL()
    this.getGdly()
    // this.getBmll()
    // this.getBmcq()
    this.getNrlb()
    this.getRepeat()
    this.getGdMonthForYear()
    this.getTdlMonthForYear()
    this.getBmyjLbYear()
    this.getCqjMonthForYear()
  },
  methods: {
    // 获取数据 今日预警件统计  
    getGdblltjL () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getGdblltj_y).then(res => {
        if (res) {
          let nameList = []
          that.workOrderNumber = res.map(item => {
            nameList.push(item.deptName)
            return {
              value: item.count,
              deptId: item.deptId,
              name: item.deptName
            }
          })
          const sy_chartDom5 = document.getElementById('index_card1Echart')
          const sy_myChart5 = echarts.init(sy_chartDom5)
          const sy_option5 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              top: '0px',
              left: 'left',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: nameList,
                color: ['#855dfd', '#4bf639', '#f1bf3e', '#3adcf3', '#ff28d8'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: that.workOrderNumber
              }
            ]
          }
          sy_option5 && sy_myChart5.setOption(sy_option5)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart5.resize()
            }
          }, 200)
          sy_myChart5.on('click', function (params) {
            that.orderListChange(
              'year',
              '',
              '',
              'jinridaoqi',
              false,
              '',
              '',
              params.data.deptId
            )
          })
        }
      })
    },
    // 获取数据 紧急
    async getUrgent () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getUrgent).then(res => {
        if (res) {
          let nameList = []
          this.UrgentData = res.map(item => {
            nameList.push(item.majorCatName)
            return {
              value: item.count,
              deptId: item.majorCatId,
              name: item.majorCatName
            }
          })
          const sy_chartDom5 = document.getElementById('index_card2Echart')
          const sy_myChart5 = echarts.init(sy_chartDom5)
          const sy_option5 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              top: '0px',
              left: 'left',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: nameList,
                color: ['#855dfd', '#4bf639', '#f1bf3e', '#3adcf3', '#ff28d8'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.UrgentData
              }
            ]
          }
          sy_option5 && sy_myChart5.setOption(sy_option5)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart5.resize()
            }
          }, 200)
          sy_myChart5.on('click', function (params) {
            that.orderListChange(
              'year',
              '',
              '',
              null,
              null,
              '',
              '',
              '',
              'jinji',
              params.data
            )
          })
        }
      })
    },
    // 获取数据 疫情
    async getEpidemic () {
      const that = this
      this.$axios.post(this.$api.homeCharts.getSituationCategory).then(res => {
        if (res) {
          let nameList = []
          this.EpidemicData = res.map(item => {
            nameList.push(item.majorCatName)
            return {
              value: item.count,
              deptId: item.majorCatId,
              name: item.majorCatName
            }
          })
          const sy_chartDom5 = document.getElementById('index_card3Echart')
          const sy_myChart5 = echarts.init(sy_chartDom5)
          const sy_option5 = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
              top: '0px',
              left: 'left',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: nameList,
                color: ['#855dfd', '#4bf639', '#f1bf3e', '#3adcf3', '#ff28d8'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.EpidemicData
              }
            ]
          }
          sy_option5 && sy_myChart5.setOption(sy_option5)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart5.resize()
            }
          }, 200)
          sy_myChart5.on('click', function (params) {
            that.orderListChange(
              'year',
              '',
              '',
              null,
              null,
              '',
              '',
              '',
              'yiqing',
              params.data
            )
          })
        }
      })
    },

    // 获取数据 工单办理量
    async getGdblltjR () {
      this.$axios.post(this.$api.homeCharts.getHomeGdblltjR).then(res => {
        if (res) {
          this.getGdblltj_r = res
          this.getGdblltj_r.showtextYPct = parseFloat(
            res.hbqnYPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextMPct = parseFloat(
            res.hbqnMPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.showtextDPct = parseFloat(
            res.hbqnDPct.toFixed(2)
          ).toString()
          this.getGdblltj_r.hbqnYPct = Math.round(res.hbqnYPct)
          this.getGdblltj_r.hbqnMPct = Math.round(res.hbqnMPct)
          this.getGdblltj_r.hbqnDPct = Math.round(res.hbqnDPct)
        }
      })
    },
    // 获取数据 工单情况统计
    async getGdqktj () {
      this.$axios.post(this.$api.homeCharts.getHomeGdqktj).then(res => {
        if (res) {
          this.orderState = [
            {
              title: '办理量',
              number: res.gdbblCurY,
              showTextVal: parseFloat(res.hbqnYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnYPct),
              state: res.addY,
              percentageColor: res.addY ? '#35ca1c' : '#ff3a3a',
              icon: res.addY ? 'rise' : 'decline'
            },
            {
              title: '满意率',
              number: res.curMydPct,
              showTextVal: parseFloat(res.hbqnMydYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnMydYPct),
              state: res.addMydY,
              percentageColor: res.addMydY ? '#35ca1c' : '#ff3a3a',
              icon: res.addMydY ? 'rise' : 'decline'
            },
            {
              title: '超期件',
              number: res.curCqj,
              showTextVal: parseFloat(res.hbqnCqjYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnCqjYPct),
              state: res.addCqjY,
              percentageColor: res.addCqjY ? '#ff3a3a' : '#35ca1c',
              icon: res.addCqjY ? 'rise3' : 'decline3'
            },
            {
              title: '平均回复周期',
              number: res.curAvgHf,
              showTextVal: parseFloat(
                Math.abs(res.hbqnAvgHfYPct.toFixed(2))
              ).toString(),
              percentage: Math.round(res.hbqnAvgHfYPct),
              state: res.addAvgHfY,
              percentageColor: res.addAvgHfY ? '#ff3a3a' : '#35ca1c',
              icon: res.addAvgHfY ? 'rise3' : 'decline3'
            },
            {
              title: '退单率',
              number: res.curThlPct,
              showTextVal: parseFloat(res.hbqnThlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnThlYPct),
              state: res.addThlY,
              percentageColor: res.addThlY ? '#ff3a3a' : '#35ca1c',
              icon: res.addThlY ? 'rise3' : 'decline3'
            },
            {
              title: '办结率',
              number: res.curBjlPct,
              showTextVal: parseFloat(res.hbqnBjlYPct.toFixed(2)).toString(),
              percentage: Math.round(res.hbqnBjlYPct),
              state: res.addBjlY,
              percentageColor: res.addBjlY ? '#35ca1c' : '#ff3a3a',
              icon: res.addBjlY ? 'rise' : 'decline'
            },
            {
              title: '多次下发',
              number: res.multi,
              showTextVal: parseFloat(res.multiHuanbi.toFixed(2)).toString(),
              percentage: Math.round(res.multiHuanbi),
              state: res.multiAdd,
              percentageColor: res.multiAdd ? '#ff3a3a' : '#35ca1c',
              icon: res.multiAdd ? 'rise3' : 'decline3'
            }
          ]
        }
      })
    },
    // 获取数据 工单类别统计
    async getGdlrlbL () {
      const that = this
      this.$axios.post(this.$api.homeCharts.geHomeGdlrlbL).then(res => {
        if (res) {
          let workOrderType = []
          res.forEach(item => {
            let obj = {
              value: item.count,
              name: item.ldlb,
              state: item.add,
              pct: item.pct,
              huanbiPct: item.huanbiPct
            }
            workOrderType.push(obj)
          })
          that.workOrderType = workOrderType
          // 工单内容类别统计
          const sy_chartDom1 = document.getElementById('index_card4Echart')
          const sy_myChart1 = echarts.init(sy_chartDom1)
          const sy_option1 = {
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return (
                  params.seriesName +
                  '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                  params.color +
                  ';margin-right:5px;"></span>' +
                  params.name +
                  '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                  params.value +
                  '</span><span style="font-size: 10px;">件</span>'
                ) // 鼠标悬浮显示的字符串内容
              }
            },
            legend: {
              show: false,
              top: '0',
              left: 'right',
              orient: 'vertical'
            },
            series: [
              {
                type: 'pie',
                name: '工单类别',
                color: ['#6d9fff', '#df87ff', '#8565ff', '#e1e2e3'],
                radius: ['40%', '60%'],
                avoidLabelOverlap: false,
                legendHoverLink: false,
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#fff',
                  borderWidth: 5
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.workOrderType,
                cursor: 'auto'
              }
            ]
          }
          sy_option1 && sy_myChart1.setOption(sy_option1)
          setTimeout(function () {
            window.onresize = function () {
              sy_myChart1.resize()
            }
          }, 100)
          //   sy_myChart1.on('click', function (params) {
          //     if (params.name == '其他') {
          //       let nrlb = []
          //       workOrderType.forEach(item => {
          //         if (item.name != '其他') {
          //           nrlb.push(item.name)
          //         }
          //       })
          //       that.orderListChange('year', nrlb)
          //     } else {
          //       that.orderListChange('year', params.name)
          //     }
          //   })
        }
      })
    },
    //  获取数据 工单来源统计
    async getGdly () {
      const that = this
      this.$axios.post(that.$api.homeCharts.getHomeGdly).then(res => {
        if (res) {
          let data1 = []
          let countList = []
          res.forEach(item => {
            data1.push(item.typeName)
            countList.push(item.count)
          })
          // 工单来源统计
          const sy_chartDom2 = document.getElementById('index_card5Echart')
          const sy_myChart2 = echarts.init(sy_chartDom2)
          const sy_option2 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: function (params) {
                // 鼠标悬浮显示的字符串内容
                let total = 0
                params.forEach(item => {
                  total += item.value
                })
                return (
                  params[0].name +
                  '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff;margin-right:5px;"></span>总计<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                  params[0].value +
                  '</span><span style="font-size: 10px;"> 件</span>'
                )
              }
            },
            color: '#8565ff',
            grid: {
              left: '25px',
              right: '25px',
              bottom: '40px',
              top: '20px',
              containLabel: true
            },
            textStyle: {
              color: '#666'
            },
            xAxis: [
              {
                type: 'category',
                data: data1,
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  interval: 0, // 标签设置为全部显示
                  formatter: function (params) {
                    var newParamsName = '' // 最终拼接成的字符串
                    var paramsNameNumber = params.length // 实际标签的字数
                    var provideNumber = 8 // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                    /**
                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                     */
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                      /** 循环每一行,p表示行 */
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = '' // 表示每一次截取的字符串
                        var start = p * provideNumber // 开始截取的位置
                        var end = start + provideNumber // 结束截取的位置
                        // 此处特殊处理最后一行的索引值
                        if (p == rowNumber - 1) {
                          // 最后一次不换行
                          tempStr = params.substring(start, paramsNameNumber)
                        } else {
                          // 每一次拼接字符串并换行
                          tempStr = params.substring(start, end) + '\n'
                        }
                        newParamsName += tempStr // 最终拼成的字符串
                      }
                    } else {
                      // 将旧标签的值赋给新标签
                      newParamsName = params
                    }
                    // 将最终的字符串返回
                    return newParamsName
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                min: 0
              }
            ],
            color: ['#8565ff', '#511cea', '#d565ff'],
            series: [
              {
                name: '总计',
                type: 'bar',
                stack: 'Ad',
                barWidth: '30px',
                data: countList,
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    if (countList[params.dataIndex] > 0) {
                      return countList[params.dataIndex]
                    } else {
                      return ''
                    }
                  },
                  color: '#8565ff'
                }
              }
            ]
          }
          sy_option2 && sy_myChart2.setOption(sy_option2)
          window.addEventListener('resize', () => {
            sy_myChart2.resize()
          })
          sy_myChart2.on('click', function (param) {
            res.forEach(item => {
              if (param.name === item.typeName) {
                that.sourceId = item.type
                that.orderListChange('year')
              }
            })
          })
        }
      })
    },

    // 获取数据 热点事件
    async getNrlb () {
      this.$axios
        .post(this.$api.homeCharts.getHomeNrlb, this.currentPage)
        .then(res => {
          if (res) {
            if (!res.records) return
            this.hotEvents = []
            this.hotSortArray = []
            // if (this.currentPage.current == 1) {
            //   this.hotEvents = []
            //   this.hotSortArray = []
            // }
            res.records.forEach((item, index) => {
              let obj = {
                title: `[${item.catName}]${item.majorCatName}${item.minorCatName}`,
                number: item.count,
                catid: item.catid,
                majorCatId: item.majorCatId,
                minorCatId: item.minorCatId
              }
              this.hotEvents.push(obj)
              this.hotSortArray.push(item.count)
            })
            this.maxHot = sort(this.hotSortArray)[0]
            this.totalSize = res.total
          }
        })
    },
    // 获取数据 重复事件统计
    getRepeat () {
      this.$axios
        .post(this.$api.homeCharts.getHomeRepeat, this.currentPage)
        .then(res => {
          if (res) {
            // if (this.currentPage.current == 1) {
            this.repeatList = []
            this.replatSortArray = []
            // }
            res.records.forEach((item, index) => {
              this.replatSortArray.push(item.count)
              this.repeatList.push(item)
            })
            this.maxRepeat = sort(this.replatSortArray)[0]
            this.totalSize = res.total
          }
        })
    },

    // 获取数据 全年月度工单处理量统计
    async getGdMonthForYear () {
      const that = this
      let res = await that.$api.getHomeGdMonthForYear(that.systemYear)
      const sy_chartDom3 = document.getElementById('card8Echart')
      const sy_myChart3 = echarts.init(sy_chartDom3)
      const sy_option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#a0c1ff', '#cb501d']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40 // 设置间距i
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#a0c1ff' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#9e8eff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#cb501d' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#cf14a6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 5
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'line',
            data: res[0].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(158, 178, 255,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          },
          {
            name: res[1].year + '年',
            type: 'line',
            data: res[1].data,
            smooth: true,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(204, 71, 49,0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      sy_option3 && sy_myChart3.setOption(sy_option3)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart3.resize()
        }
      }, 100)
      sy_myChart3.on('click', function (param) {
        that.duration = 'month'
        let date =
          param.seriesName.slice(0, param.seriesName.length - 1) +
          '-' +
          param.name.slice(0, 2)
        that.date = date
        that.orderListShow = true
      })
    },
    // 获取数据 全年月度退单量统计
    async getTdlMonthForYear () {
      const that = this
      const res = await that.$api.getHomeTdlMonthForYear(that.systemYear)
      // 全年月度退单率统计
      const sy_chartDom4 = document.getElementById('card9Echart')
      const sy_myChart4 = echarts.init(sy_chartDom4)
      const sy_option4 = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#97c0f6', '#958cfb']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40, // 设置间距i
          itemStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 5
          }
        },
        grid: {
          left: '25px',
          right: '20px',
          bottom: '10px',
          top: '70px',
          containLabel: true
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#97c0f6' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#96f2ec' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#958cfb' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#7bb8f6' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          offset: 10,
          data: this.monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'line',
            data: res[0].tdl,
            smooth: true,
            symbolSize: 6,
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(151, 192, 246, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          },
          {
            name: res[1].year + '年',
            type: 'line',
            data: res[1].tdl,
            smooth: true,
            symbolSize: 6,
            lineStyle: {
              width: 4,
              shadowColor: 'rgba(123, 184, 246, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 8
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      sy_option4 && sy_myChart4.setOption(sy_option4)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart4.resize()
        }
      }, 100)
      sy_myChart4.on('click', function (param) {
        that.duration = 'month'
        let date =
          param.seriesName.slice(0, param.seriesName.length - 1) +
          '-' +
          param.name.slice(0, 2)
        that.date = date
        that.orderType = 'tuihui'
        that.orderListShow = true
      })
    },
    // 获取数据 不满意件类别统计
    async getBmyjLbYear () {
      this.$axios.post(this.$api.homeCharts.getHomeBmyjLbYear).then(res => {
        if (res == undefined) return
        res.forEach((item, index) => {
          if (index < 5) {
            this.dissatisfied.push(item)
          }
        })
      })
    },
    // 获取数据 全年月度超期件统计
    async getCqjMonthForYear () {
      const that = this
      const res = await that.$api.getHomeCqjMonthForYear(this.systemYear)
      const sy_chartDom6 = document.getElementById('card11Echart')
      const sy_myChart6 = echarts.init(sy_chartDom6)
      const sy_option6 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#8e5dff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#7773d5', '#d8b5ff']
            params.forEach((item, index) => {
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                item.value +
                '</span><span style="font-size: 10px;">件</span>'
            })
            return res
          }
        },
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'roundRect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemGap: 40 // 设置间距i
        },
        xAxis: {
          data: this.monthList,
          offset: 10,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: {
          type: 'value'
        },
        color: ['#7773d5', '#d8b5ff'],
        grid: {
          left: '25px',
          right: '25px',
          bottom: '20px',
          top: '70px',
          containLabel: true
        },
        series: [
          {
            name: res[0].year + '年',
            type: 'bar',
            stack: 'one',
            data: res[0].data,
            barWidth: '30px',
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#7773d5'
            }
          },
          {
            name: res[1].year + '年',
            type: 'bar',
            stack: 'one',
            data: res[1].data,
            barWidth: '30px',
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#d8b5ff'
            }
          }
        ]
      }
      sy_option6 && sy_myChart6.setOption(sy_option6)
      setTimeout(function () {
        window.onresize = function () {
          sy_myChart6.resize()
        }
      }, 100)
      sy_myChart6.on('click', function (param) {
        that.duration = 'month'
        let date =
          param.seriesName.slice(0, param.seriesName.length - 1) +
          '-' +
          param.name.slice(0, 2)
        that.date = date
        that.orderType = 'chaoqiwancheng'
        that.orderListShow = true
      })
    },
    repeatMouseover (index) {
      this.replatShowIndex = index
    },
    maskToggle (type) {
      this.maskType = type
      if (this.maskShow == false) {
        this.currentPage.current = 1
      }
      this.maskShow = !this.maskShow
      if (this.maskShow) {
        if (this.maskType == 'hot') {
          this.getNrlb()
        } else {
          this.getRepeat()
        }
        stopBodyScroll(true)
      } else {
        stopBodyScroll(false)
      }
    },
    repeatMouseout (index) {
      this.replatShowIndex = -1
    },
    currentPageChange (page) {
      this.currentPage.current = page
      if (this.maskType == 'hot') {
        this.getNrlb()
      } else {
        this.getRepeat()
      }
    },
    currentSizeChange (size) {
      this.currentPage.size = size
      if (this.maskType == 'hot') {
        this.getNrlb()
      } else {
        this.getRepeat()
      }
    },
    orderListChange (
      duration,
      nrlb,
      sjh,
      orderType,
      multiDiliver,
      catid,
      bumanyi,
      deptId = null,
      type,
      majorCatId
    ) {
      // 年月日类型
      this.duration = duration
      // 内容类别
      this.nrlb = nrlb
      if (bumanyi == true) {
        this.bumanyi = bumanyi
      }
      // 时间
      this.date =
        this.selectTimeVal != '' ? this.selectTimeVal : this.systemYear
      // 手机号
      this.sjh = sjh
      // 状态类型
      this.orderType = orderType
      // 是否多次下发
      this.multiDiliver = multiDiliver
      // 工单类别
      this.catid = catid
      // ID
      this.deptId = deptId
      this.orderDataType = type
      let arrID = null
      if (majorCatId) {
        if (majorCatId.deptId == undefined) {
          arrID = this.UrgentData.map(item => {
            return item.deptId
          })
          this.majorCatId = arrID.filter(Boolean)
        } else {
          this.majorCatId = majorCatId.deptId
        }
      }
      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.nrlb = null
      this.deptId = null
      this.bumanyi = null
      this.sjh = null
      this.minorCatId = null
      this.majorCatId = null
      this.orderType = null
      this.multiDiliver = null
      this.catid = null
    },
    // 统计列表
    routerToList (item) {
      this.catid=item.catid
      this.minorCatId=item.minorCatId
      this.sjh=item.sjh
      this.orderListShow = true
    }
  },
  computed: {
    reversedMessage () {
      return function (index) {
        const colorArr = ['#855dfd', '#4bf639', '#f1bf3e', '#3adcf3', '#ff28d8']
        return colorArr[index]
      }
    },
    comSet () {
      let majIDArr = this.dissatisfied.map(item => {
        return item.majorCatId
      })
      return majIDArr.filter(Boolean)
    }
  }
}
</script>

<style lang="less" scoped>
.pageContent {
  .card1Box {
    width: 750px;
  }
  .card12Box {
    width: 810px;
  }
  .card13Box {
    width: 850px;
  }
  .card2Box {
    width: 1110px;
  }
  .index_card1Echart {
    width: 300px;
    height: 300px;
  }
  .card1Box,
  .card12Box,
  .card2Box {
    height: 294px;
    .card1 {
      margin-top: -20px;
      .index_card1Echart {
        width: 300px;
        height: 300px;
      }
      .index_card12Echart {
        width: 450px;
        height: 300px;
      }
      .card12EchartList {
        // margin-left: 200px;
        padding-right: 100px;
      }
      .card1EchartList {
        padding-right: 0px;
        .card1EchartItem_l {
          line-height: 12px;
          width: 150px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            left: 0%;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .card1EchartItem_c {
          width: 80px;
          // margin-left: 20px;
          // margin-right: 20px;
          display: flex;
          align-items: center;
          justify-content: right;
          span {
            margin-right: 6px;
          }
        }
      }
    }
  }

  .card2Box {
    .wordOrderItem {
      width: 280px;
      height: 190px;
      border-radius: 3px;
      margin-top: 38px;
      .content {
        width: 220px;
        z-index: 5;
      }
      .card_shadow {
        width: 152%;
        top: -10%;
        left: -26%;
        z-index: 0;
      }
    }
    .wordOrderItem:nth-child(1) {
      background-image: linear-gradient(to right, #5a78fd, #c87afd);
    }
    .wordOrderItem:nth-child(2) {
      background-image: linear-gradient(to right, #3daef6, #737bfc);
    }
    .wordOrderItem:nth-child(3) {
      background-image: linear-gradient(to right, #41d79c, #a7e25f);
    }
  }
  .orderStateItem {
    width: calc(100% - 180px / 7);
  }
  .orderStateItem:first-child {
    padding-left: 0;
  }
  .orderStateItem:last-child {
    border-right: 0;
  }
  .card4Box {
    width: 810px;
    height: 356px;
    .index_card4Echart {
      width: 300px;
      height: 300px;
    }
    .card4EchartList {
      padding-right: 100px;
      .card4EchartItem_l {
        line-height: 12px;
        width: 100px;
        span {
          display: inline-block;
          width: 13px;
          height: 13px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .card4EchartItem_c {
        min-width: 90px;
        margin-left: 20px;
        margin-right: 20px;
        span {
          margin-right: 6px;
        }
      }
      .card4EchartItem_r {
        .trendImg {
          width: 10px;
          margin-left: 5px;
        }
      }
    }
  }
  .company {
    left: 50px;
    top: 60px;
  }
  .card3Box {
    height: 356px;
  }
  .card5Box {
    width: calc(100% - 810px - 20px);
    height: 356px;
    .index_card4Echart {
      width: 300px;
      height: 300px;
    }
  }
  .card6Box {
    width: 810px;
    height: 380px;
  }
  .card7Box {
    width: calc(100% - 810px - 20px);
    height: 380px;
    overflow: visible;
    .replatItem {
      min-height: 32px;
      .title {
        width: 100%;
        margin-bottom: 6px;
      }
      .repeatContentBox {
        bottom: 30px;
        .sanjiao_down {
          bottom: -20px;
          border-top: 20px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
  .card8Box,
  .card9Box,
  .card11Box {
    height: 500px;
    .card8Echart,
    .index_card5Echart,
    .card9Echart,
    .card11Echart {
      width: 1620px;
      height: 400px;
    }
  }
  .card10Box {
    height: 400px;
    .circleProgressWidth {
      width: 156px;
    }
  }
  .customSvg {
    width: 150px;
    height: 150px;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .cardTitleBox {
    .cardMore {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .maskBox {
    .closeMask {
      right: 10px;
      top: 10px;
      .el-icon-close {
        font-size: 32px;
      }
    }
    .maskContent {
      height: 86%;
      overflow-y: scroll;
      .replatItem {
        min-height: 32px;
        .title {
          width: 100%;
          margin-bottom: 6px;
        }
        .repeatContentBox {
          z-index: 999;
          .repeatContent {
            -webkit-line-clamp: 6;
          }
          .sanjiao_down {
            top: -20px;
            border-bottom: 20px solid rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
    .Pagination {
      position: absolute;
      right: 30px;
      bottom: 20px;
    }
  }
  .text-pure-orange {
    color: orange;
  }
  .text-pure-red {
    color: red;
  }
  .back-pure-orange {
    background-color: orange;
  }
  .back-pure-red {
    background-color: red;
  }
}
</style>
<style lang="less">
.resetBtn:hover,
.resetBtn:focus {
  background: #8962ff !important;
  border-color: #8962ff !important;
  color: #fff !important;
}
.card1_l {
  .el-progress-bar__outer {
    width: 180px;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #8b0cd9, #7770d5) !important;
  }
}
.complete {
  .el-progress-circle__track {
    stroke: #f4f7f9;
  }
}
.wordOrderItem:nth-child(1) {
  .el-progress-bar__outer {
    background: #dbbcfe;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #879bff, #f2f7f9) !important;
  }
}
.wordOrderItem:nth-child(2) {
  .el-progress-bar__outer {
    background: #b2c5fd;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #6bbefb, #f2f7f9) !important;
  }
}
.wordOrderItem:nth-child(3) {
  .el-progress-bar__outer {
    background: #c5efb8;
  }
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #6cdc85, #f2f7f9) !important;
  }
}
.orderStateItem {
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3183ed, #66d4fd) !important;
  }
}
.dissatisfied {
  .dissatisfied_1 svg > path:nth-child(2) {
    stroke: url(#dissatisfied1);
  }
  .dissatisfied_2 svg > path:nth-child(2) {
    stroke: url(#dissatisfied2);
  }
  .dissatisfied_3 svg > path:nth-child(2) {
    stroke: url(#dissatisfied3);
  }
  .dissatisfied_4 svg > path:nth-child(2) {
    stroke: url(#dissatisfied4);
  }
  .dissatisfied_5 svg > path:nth-child(2) {
    stroke: url(#dissatisfied5);
  }
}
.hotEvents {
  .el-progress-bar__inner {
    background-image: linear-gradient(to right, #2f81ed, #2ee7d9) !important;
  }
}
.card10Box {
  .shadow {
    width: 150px;
    height: 150px;
    left: 3px;
    top: 3px;
    border-radius: 100%;
  }
  .dissatisfied_1 .shadow {
    -webkit-animation: shineRed1 1 forwards;
  }
  .dissatisfied_2 .shadow {
    -webkit-animation: shineRed2 1 forwards;
  }
  .dissatisfied_3 .shadow {
    -webkit-animation: shineRed3 1 forwards;
  }
  .dissatisfied_4 .shadow {
    -webkit-animation: shineRed4 1 forwards;
  }
  .dissatisfied_5 .shadow {
    -webkit-animation: shineRed5 1 forwards;
  }
}
@-webkit-keyframes shineRed1 {
  0% {
    -webkit-box-shadow: 0 0 15px #8073ff;
  }
  50% {
    -webkit-box-shadow: 0 0 15px #7d80ff;
  }
  75% {
    -webkit-box-shadow: 0 0 15px #c23bfd;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #c03cfd;
  }
}
@-webkit-keyframes shineRed2 {
  0% {
    -webkit-box-shadow: 0 0 15px #75bfff;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #463cfd;
  }
}
@-webkit-keyframes shineRed3 {
  0% {
    -webkit-box-shadow: 0 0 15px #f773ff;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #fd3b91;
  }
}
@-webkit-keyframes shineRed4 {
  0% {
    -webkit-box-shadow: 0 0 15px #ff767e;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #fdaa3c;
  }
}
@-webkit-keyframes shineRed5 {
  0% {
    -webkit-box-shadow: 0 0 15px #6fee8c;
  }
  100% {
    -webkit-box-shadow: 0 0 15px #36ecd9;
  }
}
.maskBox {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #f5f5f5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #7e7d7d;
  }
}
</style>
